<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="viewport"
	content="width=device-width, maximum-scale=1.0, initial-scale=1.0,initial-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="keywords" content="盒子实验室 BOX LAB,论坛，社区">
<meta name="description" content="针对国内青少年STEAM创客教育建设的，提供教学案例，案例代码，国内外一手资源和创新实验信息等的开源交流社区。">
<title>盒子实验室 BOX LAB注册</title>
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico?t=${.now?long}"/>
<link rel="stylesheet" href="/css/layui.css">
<link rel="stylesheet" href="/css/regSuccess.css">
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/cropper/cropper.js"></script>
<script src="/cropper/bootstrap.min.js"></script>
<link rel="stylesheet" href="/cropper/cropper.min.css">
<!-- <link rel="stylesheet" href="/cropper/bootstrap.min.css"> -->
<script src="/layui.js"></script>
<style type="text/css">
body{
        text-align: center;
        background: #fff;
    }
    #user-photo {
        width:300px;
        height:300px;
        margin-top: 10px;
    }
    #photo {
        max-width:100%;
        max-height:350px;
    }
    .img-preview-box {
        text-align: center;
    }
    .img-preview-box > div {
        display: inline-block;;
        margin-right: 10px;
    }
    .img-preview {
        overflow: hidden;
    }
    .img-preview-box .img-preview-lg {
        width: 150px;
        height: 150px;
    }
    .img-preview-box .img-preview-md {
        width: 100px;
        height: 100px;
    }
    .img-preview-box .img-preview-sm {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
</style>
</head>
<body>
	<button class="button-add" onclick="showLayer()">打开</button><br/>
</div>
<div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <div class="img-container hidden">
                <img src="/images/header/icon_LOGO@3x.png" alt="" id="photo">
            </div>
            <div class="img-preview-box hidden">
                <hr>
                <span>150*150:</span>
                <div class="img-preview img-preview-lg">
                </div>
                <span>100*100:</span>
                <div class="img-preview img-preview-md">
                </div>
                <span>30*30:</span>
                <div class="img-preview img-preview-sm">
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <label class="button-add" for="photoInput">
            <input type="file" class="sr-only" id="photoInput" accept="image/*">
            <span>打开图片</span>
            </label>
        </div>
    </div>
</div>
</div>

<script type="text/javascript">
var layer;
layui.use('layer', function(){
	  layer = layui.layer;
})
    var options = {
        aspectRatio: 1, // 纵横比
        viewMode: 2,
        preview: '.img-preview' // 预览图的class名
    };
var saveData = {};
var URL = window.URL || window.webkitURL;
var blobURL;
var $image = $('#photo');
var $inputImage = $('#photoInput');
var $modal = $('#changeModal');

var sendPhoto = function(){
$('#photo').cropper('getCroppedCanvas',{
    width:300,
    height:300
}).toBlob(function(callback, type, encoderOptions){
    // 转化为blob后更改src属性，隐藏模态框
    $('#changeModal').modal('hide');
    var formData = new FormData();
	var nameImg = new Date().getTime() + '.png';
	formData.append("avator",callback,nameImg);
	var request = new XMLHttpRequest();
	request.open("POST", "/user/profile/avator.html");
	request.send(formData);
});

}
$(function(){
	 if (URL) {
	        $inputImage.change(function() {
	            var files = this.files;
	            var file;
	            if (!$image.data('cropper')) {
	                return;
	            }
	            if (files && files.length) {
	                file = files[0];
	                if (/^image\/\w+$/.test(file.type)) {

	                    if(blobURL) {
	                        URL.revokeObjectURL(blobURL);
	                    }
	                    blobURL = URL.createObjectURL(file);

	                    // 重置cropper，将图像替换
	                    $image.cropper('reset').cropper('replace', blobURL);

	                    // 选择文件后，显示和隐藏相关内容
	                    $('.img-container').removeClass('hidden');
	                    $('.img-preview-box').removeClass('hidden');
	                    $('#changeModal .disabled').removeAttr('disabled').removeClass('disabled');
	                    $('#changeModal .tip-info').addClass('hidden');

	                } else {
	                    window.alert('请选择一个图像文件！');
	                }
	            }
	        });
	    } else {
	        $inputImage.prop('disabled', true).addClass('disabled');
	    }
});

function showLayer(){
	layer.open({
	      area: ['700px', '500px'],
	      btn: ['提交', '关闭'] ,
		  content: $("#changeModal").html(),
		  success: function(layero, index){
		        // 重新创建
		        $("#photo").cropper( $.extend(options, {
		            ready: function () {
		                // 当剪切界面就绪后，恢复数据
		                if(saveData.canvasData){
		                    $image.cropper('setCanvasData', saveData.canvasData);
		                    $image.cropper('setCropBoxData', saveData.cropBoxData);
		                }
		            }
		        }));

		  },
		  yes:function(index, layero){
			  $('#photo').cropper('getCroppedCanvas',{
				    width:300,
				    height:300
				}).toBlob(function(callback, type, encoderOptions){
				    // 转化为blob后更改src属性，隐藏模态框
				    $('#user-photo').attr('src',URL.createObjectURL(callback));
				    $('#changeModal').modal('hide');
				    var formData = new FormData();
					var nameImg = new Date().getTime() + '.png';
					formData.append("avator",callback,nameImg);
					var request = new XMLHttpRequest();
					request.open("POST", "/user/profile/avator.html");
					request.send(formData);
				});
		  },
		  cancel: function(index, layero){
			  // 保存相关数据
		        saveData.cropBoxData = $image.cropper('getCropBoxData');
		        saveData.canvasData = $image.cropper('getCanvasData');
		        // 销毁并将图片保存在img标签
		        $('#photo').cropper('destroy').attr('src',blobURL);
		  }
		});  
}
</script>
</body>
</html>